<!-- 创建优惠券 之 选择类型 -->
<template>
	<view class="set-coupon">
		<view class="item" v-for="(item,index) in value" :key="index">
			<view class="item-head" @click="click(index)">
				<text>{{item.head}}</text>
				<view class="head-right">
					<view class="right-tip" v-show="(index == 0 && show0) || (index == 1 && show1)">
						<text>{{item.tip}}</text>
					</view>
					<u-icon name="arrow-down" color="#9e9e9e" size="24" v-if="(index == 0 && show0) || (index == 1 && show1)"></u-icon>
					<u-icon name="arrow-up" color="#9e9e9e" size="24" v-else></u-icon>
					
				</view>
			</view>
			<navigator :url="'../set-coupon/set-coupon?index=' + index + '&index2=' + index2 + '&title=' + item2.title" class="item-option" v-if="(index == 0 && !show0) || (index == 1 && !show1)" v-for="(item2,index2) in item.option" :key="index2">
				<text>{{item2.title}}</text>
				<view class="option-right">
					<view class="right-tip">
						<text>{{item2.tip}}</text>
					</view>
					<u-icon name="arrow-right" color="#9e9e9e" size="24"></u-icon>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show0:false,        //店铺券展示
				show1:false,		//商品券展示
				value:[
					{
						head:'店铺券',
						tip:'店铺内所有商品通用的券',
						option:[
							{
								title:'店铺直减券',
								tip:'全店直减'
							},
							{
								title:'店铺满减券',
								tip:'全店消费满N元，减X元'
							},
							{
								title:'店铺折扣券',
								tip:'全店折扣'
							}
						]
					},
					{
						head:'商品券',
						tip:'针对单一商品使用的券',
						option:[
							{
								title:'商品直减券',
								tip:'针对单一商品直减'
							},
							{
								title:'商品折扣券',
								tip:'针对单一商品折扣'
							}
						]
					}
				]
			};
		},
		methods:{
			click(e){
				e == 0 ? this.show0 = !this.show0 : this.show1 = !this.show1
			}
		}
	}
</script>

<style lang="scss">
.set-coupon{
	.item{
		margin: 20rpx;
		padding: 0 40rpx;
		background-color: #fff;
		.item-head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 120rpx;
			font-weight: 700;
			font-size: 16px;
			.head-right{
				display: flex;
				.right-tip{
					margin-right: 40rpx;
					font-weight: 400;
					font-size: 13px;
					color: #9e9e9e;
				}
			}
		}
		.item-option{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			.option-right{
				display: flex;
				.right-tip{
					margin-right: 40rpx;
					color: #9e9e9e;
				}
			}
		}
	}
}
</style>

